import styles from './index.less';
import React, { useState } from 'react';

function RadioButton(props) {
    const[state1,setState1]= useState();
    const[state2,setState2]= useState(false);
    const { onChange }=props
    const handleChange = e => {
      let result= Number(e.target.getAttribute('value'))
      if(e.target.getAttribute('name')==='sex'){
        result===1?setState1(true):setState1(false)
        result===1?setState2(false):setState2(true)
        onChange(result)
      }
      e.stopPropagation();
    }

    return(
        <div className={styles.boxButton} onClick={(e)=>{handleChange(e)}}>
          <div className={`${styles.Button} ${state1?styles.activeButton:''}`} value='1' name='sex'>男</div>
          <div className={`${styles.Button} ${state2?styles.activeButton:''}`} value='2' name='sex'>女</div>
        </div>
    )
}
export default RadioButton